<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2024-01-31 10:35:29
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2024-01-31 14:50:54
 * @FilePath: \ZHGD-Vue2\src\views\bitumenMixingStation\gradingSetting\gradingType.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="gradingTypepPage">
    <el-form :inline="true" :model="queryParams" size="small" style="display: flex;justify-content: space-between;">
      <div>
        <el-form-item label="级配类型">
          <el-input v-model="queryParams.type" placeholder="级配类型" clearable></el-input>
        </el-form-item>

        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="handleQuery(true)">查询</el-button>
          <!-- v-if="$hasPermission('api:asphaltMatchType:list')" -->
        </el-form-item>
      </div>
    
      <el-form-item>
        <el-button type="success" icon="el-icon-plus" @click="showEdit()">添加</el-button>
        <!-- v-if="$hasPermission('api:asphaltMatchType:save')" -->
      </el-form-item>
    </el-form>

    <div>
      <el-table :data="dataList" :header-cell-style="{ 'text-align': 'center' }" fit border size="mini" highlight-current-row stripe>
        <el-table-column prop="type" label="级配类型" align="center"></el-table-column>
        <el-table-column prop="maxSieveSize" label="最大粒径(mm)" align="center"></el-table-column>
        <el-table-column prop="nominalMaxSieveSize" label="公称最大粒径(mm)" align="center"></el-table-column>
        <el-table-column prop="info" label="备注" align="center" min-width="80" show-overflow-tooltip></el-table-column>
        <el-table-column prop="updateName" label="修改人" align="center"></el-table-column>
        <el-table-column prop="updateDate" label="修改时间" align="center"></el-table-column>
        <el-table-column label="操作" align="center" width="120px" fixed="right">
          <template slot-scope="scope">
            <el-link type="primary" @click="showEdit(scope.row.id)">编辑</el-link> <!-- v-if="$hasPermission('api:asphaltMatchType:edit')" -->
            <el-divider direction="vertical"></el-divider>
            <el-link type="primary" @click="onDelete(scope.row.id)">删除</el-link> <!-- v-if="$hasPermission('api:asphaltMatchType:remove')" -->
          </template>
        </el-table-column>
      </el-table>
      <pagination class="fenye" v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
    </div>

    <el-dialog :title="isAdd ? '添加级配类型' : '修改级配类型'" :visible.sync="visible" :close-on-click-modal="false" :close-on-press-escape="false" :before-close="doClose" width="800px">
      <div>
        <el-form ref="editForm" :model="form" :rules="rules" label-width="120px" class="myForm" size="small">
          <el-form-item label="级配类型" prop="type">
            <el-input placeholder="级配类型" v-model="form.type" maxlength="20" v-if="isAdd"></el-input>
            <span v-else>{{ form.type }}</span>
          </el-form-item>

          <el-form-item label="级配筛孔">
            <el-checkbox-group v-model="form.sieveArray">
                <el-checkbox v-for="item of sieveSizeDictList" :key="item.code" :label="item.size">{{ item.size }} mm</el-checkbox>
            </el-checkbox-group>
          </el-form-item>

          <el-form-item label="备注" prop="info">
            <el-input type="textarea" placeholder="备注" v-model="form.info" maxlength="200"></el-input>
          </el-form-item>
        </el-form>
      </div>
        <span slot="footer">
          <el-button size="mini" @click="doClose">取消</el-button>
          <el-button type="primary" size="mini" @click="doSubmit" :loading="submitLoading">确定</el-button>
        </span>
    </el-dialog>
  </div>
</template>
  
<script>
import { asphaltMatchType, asphaltMatchLook, asphaltMatchTypeAdd, asphaltMatchTypeEdit, asphaltMatchTypeRemove } from "@/api/bitumenMixingStation/gradingSetting/gradingType";
import constant from "@/api/waterStability/producedData/constant";

export default {
    name: 'gradingType',
    data() {
        return {
            dataList: [],
            visible: false,
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                type: ''
            },
            total: 0,
            isAdd: false,
            loading: false,
            submitLoading: false,
            form: {
                type: '',
                sieveArray: [],
                info: ''
            },
            rules: {
                type: [{ required: true, message: '请填写级配类型', trigger: 'blur' }]
            },
            sieveSizeDictList: constant.sieveSizeDictList,
        };
    },
    mounted() {
        this.getList()
    },
    methods: {
        /*  初始化表单 @returns 表单数据 */
        initForm() {
            return {
                sieveArray: []
            };
        },
        getList() {
            this.loading = true;
            asphaltMatchType(this.queryParams).then((res) => {
                this.dataList = res.rows;
                this.total = res.total;
                this.loading = false;
            });
        },
        /*** 提交表单*/
        doSubmit() {
            this.$refs.editForm.validate((valid) => {
                if (valid) {
                    this.submitLoading = true
                    this.form.sieveArray = JSON.stringify(this.form.sieveArray)
                    if (this.isAdd) {
                        // 新增
                        asphaltMatchTypeAdd(this.form).then((res) => {
                            this.$message.success("新增设计生产配比成功！");
                            this.getList();
                            this.visible = false;
                            this.submitLoading = false
                        })
                    } else {
                        // 修改
                        asphaltMatchTypeEdit(this.form).then((res) => {
                            this.$message.success("修改设计生产配比成功！");
                            this.getList();
                            this.visible = false;
                            this.submitLoading = false
                        })
                    }
                }
            });
        },
        /*** 关闭弹窗*/
        doClose() {
            this.visible = false;
        },
        // 删除
        onDelete(id) {
            this.$confirm("此操作将删除该条数据, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
            .then(() => {
                asphaltMatchTypeRemove(id).then((res) => {
                    this.getList();
                    this.$message({
                        type: "success",
                        message: "删除成功!",
                    });
                });
            })
            .catch(() => {
                this.$message({
                    type: "info",
                    message: "已取消删除",
                });
            });
        },
        getSearchParams() {
            const params = {};
            for (const key in this.queryParams) {
                if (key === "time") {
                    const time = this.queryParams[key];
                    if (time && time.length === 2) {
                        params.startTime = time[0];
                        params.endTime = time[1];
                    }
                } else {
                    params[key] = this.queryParams[key];
                }
            }
            return params;
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams = this.getSearchParams();
            this.queryParams.pageNum = 1;
            this.getList();
        },
        showEdit(id) {
            this.visible = true;
            this.isAdd = null == id || undefined == id;
            this.loading = false;
            this.submitLoading = false;
            this.$nextTick(() => {
                if (this.isAdd) {
                    this.form = this.initForm();
                    this.$refs['editForm'].resetFields();
                } else {
                    this.infoForm(id);
                }
            });
        },
        infoForm(id) {
            this.loading = true;
            this.$refs['editForm'].clearValidate();
            asphaltMatchLook(id).then((res) => {
                this.form = res.data;
                this.form.sieveArray = JSON.parse(this.form.sieveArray)
                this.loading = false;
            }).catch(() => {
                this.form = {}
                this.loading = false;
            });
        },
    }
};
</script>
  
<style scoped>
.gradingTypepPage {
    padding: 16px;
}
</style>
  